<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
					body{
						perspective: 500px;
					}
					
					ul {
						width: 200px;
						height: 200px;
						margin: 100px auto;
						
						position: relative;
											
						transform-style: preserve-3d;
						animation: adrot 16s linear infinite;
						
						/* transform: rotateY(0deg) rotateX(0deg); */
					}
							
					li {
						width: 200px;
						height: 200px;
						font-size: 50px;
						line-height: 200px;
						text-align: center;
						list-style: none;
						position: absolute;
						top: 0;
						left: 0;
					}
		
					li:nth-child(1) {
						/* 左 */
						background: red;
						transform: rotateY(-90deg) translateZ(200px) ;
					}
						/* 右 */
					li:nth-child(2) {
						background: green;
						transform: rotateY(90deg) translateZ(200px) ;
					}
					
					  /* 上 */
					li:nth-child(3) {
						background: blue;
						transform: rotateX(90deg) translateZ(100px) scale(2, 1);
					}
						
						/* 下 */
					li:nth-child(4) {
						background: purple;
						transform: rotateX(-90deg) translateZ(100px) scale(2, 1) ;
					}
						
						/* 前 */
					li:nth-child(5) {
						background: yellow;
						transform: translateZ(100px) scale(2, 1);
					}
					
					/* 后 */
					li:nth-child(6) {
						background: pink;
						transform: translateZ(-100px) rotateX(180deg) scale(2, 1);				
						
					}
					@keyframes adrot{
						from{
							transform: rotateX(0deg);
						}
						to{
							transform: rotateX(360deg);
						}
					}
				</style>
			</head>
			<body>
				<!-- 
					长方体只需要加入transform:scale(宽放大,1)	
					
					注意点：
					当宽度放大后，左右两侧需要在往Z轴方向推出
				 -->
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
			</body>
		</html>
		
